<template>
  <div>
    <el-form :inline="true"   class="search-form" size="medium" label-width="100px">
      <el-form-item label="市场名称">
        <el-select v-model="searchForm.marketId" placeholder="请选择市场" >
          <el-option v-for="(item,index) in store.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="商户名称:" >
        <el-input v-model="searchForm.shopName" placeholder="商户名称" clearable></el-input>
      </el-form-item>
      <el-form-item  label="管理员电话:" >
        <el-input v-model="searchForm.shopMobile" placeholder="管理员电话" clearable></el-input>
      </el-form-item>
      <el-form-item label="商户状态:">
        <el-select v-model="searchForm.shopState" placeholder="状态" style="width:200px;">
          <el-option
            v-for="item in  stateList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="创建时间:" >
        <el-date-picker type="date" :picker-options="pickerOptions1" :editable='edit' v-model="searchForm.searchStartTime" name="shopCreateTime" placeholder="选择日期"  value-format="yyyy-MM-dd">
        </el-date-picker>-
        <el-date-picker type="date" :picker-options="pickerOptions2" :editable='edit' v-model="searchForm.searchEndTime" name="shopCreateTime" placeholder="选择日期"  value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" icon="el-icon-search" @click="searchData()">查询</el-button>
        <el-button icon="el-icon-refresh" @click="clearSearch">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table  :data="shopList" border v-loading="loading">
      <el-table-column label="店铺Logo" align="center" width="110">
        <template slot-scope="scope">
          <img style="cursor: pointer" :src="imgUrl + scope.row.shopLogo+'.r_90xh_60'" onerror="javascript:this.src='static/images/default.svg'" @click="handleEdit(scope.row.shopId,1)">
        </template>
      </el-table-column>
      <el-table-column prop="shopName" label="店铺名称">
        <template slot-scope="scope">
          <p style="cursor:pointer" @click="handleEdit(scope.row.shopId,1)">{{scope.row.shopName}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="shopMobile" label="联系电话"></el-table-column>
      <el-table-column prop="shopAddress" label="店铺地址"></el-table-column>
      <el-table-column label="管理员信息" min-width="160">
        <template  slot-scope="scope">
          <p>负责人姓名：{{scope.row.shopManageName}}</p>
          <p>联系电话：{{scope.row.shopManageMobile}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="market.marketName" label="所属市场" ></el-table-column>
      <el-table-column label="店铺状态" align="center">
        <template   slot-scope="scope">
          <span>{{scope.row.shopState | filteShopState}}</span>
        </template>
      </el-table-column>
      <el-table-column label="在售车辆"  align="center" >
        <template   slot-scope="scope">
          <span>{{scope.row.carNum}}辆</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间"  align="center" >
        <template slot-scope="scope">
          {{scope.row.shopCreateTime | filterDateForDay }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <el-button type="primary" size="small">
              更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleEdit(scope.row.shopId)">编辑</el-dropdown-item>
              <el-dropdown-item @click.native="handleRentInfo(scope.row.marketId,scope.row.shopId)">租赁信息</el-dropdown-item>
              <el-dropdown-item @click.native="goToCarList(scope.row.marketId,scope.row.shopId)">查看销售车辆</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.pageIndex"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="store.params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions1:{
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        pickerOptions2:{
          disabledDate: (time)=>{
            const time1 = this.searchForm.searchStartTime.replace(/-/g,'/');
            const time2 = new Date(time1).getTime();
            return  time.getTime() > Date.now()||time.getTime() < time2;
          }
        },
        edit:false,
        imgUrl:imageUrl,
        loading: true,
        shopList:[],
        pageTotal:0,
        store:{
          marketOptions:[],
          params:{
            pageSize:10,
            pageIndex:1,
            marketId:this.$marketId,
          }
        },
        stateList: [
          { value: 1,name: '正常'},
          { value: 0,name: '冻结'}
        ],
        searchForm: {
          pageSize:10,
          pageIndex:1,
          shopName: '',
          marketId:this.$marketId,
          shopMobile:'',
          searchStartTime: '',
          searchEndTime: '',
          shopState: 1
        }
      }
    },
    created(){
      this.$store.commit('getMarketOptions',this.store)
    },

    activated() {
      this.getData();
    },
    methods:{
      searchData(){
        this.searchForm.pageIndex = 1;
        this.getData();
      },
      getData(){
        this.loading = true;
        this.$axios.get(this.$api.getShopList,{params: this.searchForm})
          .then((res)=>{
            console.log(res)
            this.shopList = res.data.result;
            this.loading = false;
          })
        this.$axios.get(this.$api.getShopNumber,{params: this.searchForm})
          .then((res)=>{

            this.pageTotal = res.data.result.total
          })
      },
      clearSearch(){
        this.searchForm = {
          pageSize:10,
          pageIndex:1,
          shopName: '',
          marketId:this.$marketId,
          shopMobile:'',
          searchStartTime: '',
          searchEndTime: '',
          shopState: 1
        }
        this.getData();
      },
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.searchForm.pageIndex = val;
        this.getData();
      },
      handleEdit(shopId,status) {
        if(!status){
          this.$router.push("/shop/shopForm/"+ shopId)
        }else{
          this.$router.push("/shop/shopForm/"+ shopId+'?status='+status)
        }
      },
      goToCarList(marketId,shopId){
        this.$router.push( {path:'/car/subCarList',  query: { marketId: marketId, shopId: shopId  }})
      },
      handleRentInfo(marketId,shopId){
        this.$router.push( {path:'/contract/contractList',  query: { marketId: marketId, shopId: shopId  }})
      }
    },

  };
</script>
